<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>请假详情</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/leave_detail.css">
	<link rel="stylesheet" href="../css/main.css">
	<style>
		.content{
			background: #eceaff;
			border-radius: 12px;
			padding-left: 2%;
			padding-top: 1%;
		    border: solid 1px #b6b6b6;;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header">
				<div class="header_title">请假详情</div>
				<a onclick="history.back()">
					<img src="../image/return.png" alt="" class="return">
				</a>
			</div>
			<div style="height: 40px;"></div>
			<div class="content">
				<div class="user_name">
					<span>姓名</span>
					<div class="info" v-text="item.studentName"></div>
				</div>
				<div class="user_name">
					<span>请假类别</span>
					<div class="info" v-text="{0:'事假',1:'病假',2:'其他'}[item.type]"></div>
				</div>
				<div class="user_name">
					<span>开始时间</span>
					<div class="info" v-text="format(item.startTime)"></div>
				</div>
				<div class="user_name">
					<span>结束时间</span>
					<div class="info" v-text="format(item.endTime)"></div>
				</div>
				<div class="user_name">
					<span style="vertical-align: top;">具体事由</span>
					<div class="info" v-text="item.reason"></div>
				</div>
				<div class="user_name" v-if="item.remark">
					<span style="vertical-align: top;">驳回原因</span>
					<div class="info" v-text="item.remark"></div>
				</div>
			</div>
			<div class="offer" v-if="item.status==0">
				<input type="button" value="同意" @click="submit(true)">
				<input type="button" value="驳回" @click="submit(false)" style="margin-left: 10%;">
			</div>

		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				item: {}
			},
			methods: {
				format: function (time) {
					if (!time) return '';
					return dayjs(time).format('YYYY-MM-DD HH:mm');
				},
				submit: function (agree) {
					var remark;
					if (!agree) remark = prompt('填写驳回原因？');
					if (!confirm('确认？')) return;
					axios.post('/t/leave/' + this.item.id + '/' + agree,
						toFormParams({ remark: remark })).then(function (res) {
							this.item.status = agree ? 1 : 2;
							this.item.remark = remark;
							alert('你已' + (agree ? '同意' : '驳回') + '该请假申请');
						}.bind(this));
				}
			},
			created: function () {
				var id = params().id;
				if (!id) {
					alert('参数错误');
					throw '找不到id';
				}
				axios.get('/t/leave/' + id).then(function (res) {
					this.item = res.data;
				}.bind(this));
			}
		});
	</script>

</body>

</html>